<template>
	<div class="edu-page-warp">
		<condition-card :labelWidth="'100px'" @reset="reset" @search="getEduProfessions"  v-if="isShowHandle">
			<el-row>
				<el-col :span="8">
					<el-form-item :label="$t('label.grade')" prop="grade">
						<el-date-picker
							v-model="model.grade"
							value-format="yyyy"
							type="year"
							:placeholder="$t('message.plsSelect')"
							@change="getProfessionClassList"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item :label="$t('label.college')" label-width="120px" :placeholder="$t('message.all')" prop="faculty">
						<DictSelect v-model="model.faculty" @change="getProfessionClassList" :data="options.faculty"></DictSelect>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item :label="$t('culture.profession.category')">
						<el-select style="width: 100%;" v-model="model.category" :placeholder="$t('message.all')">
							<el-option
								v-for="item in options.category"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item :label="$t('culture.profession.categoryCode')">
						<el-select
							style="width: 100%;"
							v-model="model.categoryCode"
							@change="getEduProCode"
							:placeholder="$t('message.all')"
						>
							<el-option
								v-for="item in options.categoryCode"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item :label="$t('culture.profession.ministryClassCode')" label-width="120px">
						<el-select
							style="width: 100%;"
							v-model="model.professionClassCode"
							:placeholder="$t('message.all')"
						>
							<el-option
								v-for="item in options.professionClassCode"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
        <el-col :span="8">
          <el-form-item :label="$t('professions.isArts')">
            <DictSelect v-model="model.isArts" :data="options.isArts"></DictSelect>
          </el-form-item>
        </el-col>
			</el-row>
		</condition-card>

		<el-card shadow="never">
			<div class="edu-page-title" style="margin-bottom:16px"
			>{{$t('culture.profession.profession')+$t('culture.profession.category')}}</div>
			<div class="edu-opertion-bar"  v-if="isShowHandle" style="margin-bottom:16px">
				<div class="float-left">
					<el-input
						v-model="model.keyWord"
						:placeholder="$t('professions.plsInputProCodeOrProName')"
						style="width:250px"
						@keyup.enter.native="getEduProfessions"
					>
						<i
							class="el-icon-search"
							slot="suffix"
							style="margin-top:10px;cursor:pointer"
							@click="getEduProfessions()"
						></i>
					</el-input>
				</div>
				<div class="float-right">
					<el-button type="primary" @click="exportRel">{{$t('message.export')}}</el-button>
				</div>
			</div>
			<el-table :data="tableData" size="mini" @selection-change="handleSelectionChange" stripe tooltip-effect="light">
				<!-- <edu-table-column type="selection" width="30"></edu-table-column> -->
				<edu-table-column type="index" width="55" :label="$t('message.order')" align="center"></edu-table-column>
				<edu-table-column :label="$t('dic.grade')" width="70">
					<template slot-scope="scope">{{scope.row.grade}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('dic.faculty')">
					<template slot-scope="scope">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="getFacultyStr(scope.row.faculty)"
						>
							<span slot="reference">{{getFacultyStr(scope.row.faculty)}}</span>
						</el-popover>
					</template>
				</edu-table-column>
				<edu-table-column
					:label="$t('culture.profession.proCodeName')"
					prop="professionNameConcat"
				/>
				<edu-table-column :label="$t('culture.profession.category')" width="90">
					<template slot-scope="scope">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="getCategoryStr(scope.row.category)"
						>
							<span slot="reference">{{getCategoryStr(scope.row.category)}}</span>
						</el-popover>
					</template>
				</edu-table-column>
        <edu-table-column :label="$t(' professions.isArts')" min-width="60">
          <template slot-scope="scope">
            <label v-if="scope.row.isArts || scope.row.isArts === 1">{{$t('message.yes')}}</label>
            <label v-else>{{$t('message.no')}}</label>
          </template>
        </edu-table-column>
				<edu-table-column
					:label="$t('culture.profession.categoryCode')"
					prop="categoryNameConcat"
					width="140"
				/>
				<edu-table-column
					:label="$t('culture.profession.ministryClassCode')"
					prop="professionClassNameConcat"

				/>
				<edu-table-column
					:label="$t('culture.profession.ministryEduCode')"
					prop="ministryEduNameConcat"

				/>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="onPageSizeChange"
						@current-change="onCurrentPageChange"
						:current-page="model.pageNum_"
						:page-sizes="[20,50,100,500,1000]"
						:page-size="model.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="model.total_"
						style="float: right;margin:10px 60px 0 0;"
					></el-pagination>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
import bus from "common/src/utils/bus";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import {
	findCategoryList,
	findProfessionClassList,
	findProfessionList
} from "common/src/api/culture/eduProfession";
import {
	findCampusMinistryRel,
	campusMinistryRelExport,
	findProByParam
} from "common/src/api/culture/campusProfession";
import { getFacultys } from "common/src/api/resource/course";
export default {
	name: "equeryProfession",
	data() {
		return {
			tableData: [],
			options: {
				faculty: [],
				category: [],
				categoryCode: [],
				bigCategory: [],
        isArts: [],
				professionClassCode: []
			},
			model: {
				pageNum_: 1,
				pageSize_: 20,
				total_: 0,
				grade: "",
				faculty: "",
				category: "", //类别
				bigCategory: "", //专业类
				categoryCode: "", //门类
        isArts: null,//是否艺术类
				professionClassCode: "", //教育部专业类
				keyWord: ""
			},
			//是否显示操作按钮
			isShowHandle: false
		};
	},
	created() {
		this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
			this.functions = funcs;
		});
		//进入页面根据本科生和研究生判断操作按钮是否显示
		let user =
			this.$store.state.session.user ||
			JSON.parse(localStorage.getItem("user"));
		if (user) {
			this.isShowHandle = user.currentManageDptId === "1";
		}
		//切换管理部门
		bus.$on("updateCurrentManageDeptId", currentManageDeptId => {
			if (currentManageDeptId == 1) {
				this.isShowHandle = true;
			} else {
				this.isShowHandle = false;
			}
			this.reset();
		});
	},
	mounted() {
		this.getEduProfessions();
		this.initOptions();
	},
	computed: {},
	watch: {},
	methods: {
		getProfessionClassList() {
			if (!this.model.grade || this.model.category == 2) {
				return;
			}
			// console.log(this.model.category == 2);
			//let data="?category=";
			this.options.bigCategory = [];
			this.model.bigCategory = "";

			let postData = _.cloneDeep(this.model);
			postData.grade = Number(postData.grade);
			const data = {
				grade: Number(postData.grade),
				trainingLevel: "",
				faculty: postData.faculty,
				category: "1"
			};
			findProByParam(data).then(res => {
				//findProfessionClassList(data+this.model.categoryCode)
				if (res.code == 200) {
					for (let key in res.data) {
						this.options.bigCategory.push({
							value: res.data[key].professionCateGory,
							label:
								res.data[key].professionCateGoryName +
								"(" +
								res.data[key].professionCateGory +
								")"
						});
					}
				}
			});
		},
		getEduProCode() {
			if (!this.model.categoryCode) {
				return;
			}

			let data = "?category=";
			this.options.professionClassCode = [];
			this.model.professionClassCode = "";
			findProfessionClassList(data + this.model.categoryCode).then(
				res => {
					//findProfessionList(data+this.model.categoryCode+"&proClass="+this.model.bigCategory)
					if (res.code == 200) {
						for (let key in res.data) {
							this.options.professionClassCode.push({
								value: res.data[key].code,
								label:
									res.data[key].name +
									"(" +
									res.data[key].code +
									")"
							});
						}
					}
				}
			);
		},
		getEduProfessions() {
			let postData = _.cloneDeep(this.model);
			postData.grade = Number(postData.grade);
			findCampusMinistryRel(postData).then(res => {
				if (res.code == 200) {
					//根据部门判断是否显示数据
					if (this.isShowHandle) {
						this.tableData = res.data.list;
						this.model.pageNum_ = res.data.pageNum_;
						this.model.pageSize_ = res.data.pageSize_;
						this.model.total_ = res.data.total_;
					} else {
						this.tableData = [];
						this.model.pageNum_ = 1;
						this.model.pageSize_ = 20;
						this.model.total_ = 0;
					}
				}
			});
		},
		getCategoryList() {
			findCategoryList().then(res => {
				if (res.code == 200) {
					for (let key in res.data) {
						this.options.categoryCode.push({
							value: res.data[key].code,
							label:
								res.data[key].name +
								"(" +
								res.data[key].code +
								")"
						});
					}
				}
			});
		},
		initOptions() {
			const data = {
				lang: this.$store.getters.language || "cn",
				type: "allChild",
				keys: ["X_YX"]
			};
			this.options.category.push({
				label: this.$t("culture.profession.profession"),
				value: "2"
			});
			this.options.category.push({
				label: this.$t("culture.profession.bigProfession"),
				value: "1"
			});
      //是否艺术类
      this.options.isArts = [
          {label: this.$t("message.yes"), value: true},
          {label: this.$t("message.no"), value: false}
      ];
			// queryDic(data).then(res => {
			// 	if (res.code == 200) {
			// 		UTILS.fillSelect(
			// 			{
			// 				faculty: "X_YX"
			// 			},
			// 			res.data,
			// 			this.options
			// 		);
			// 	}
			// });
			getFacultys().then(res => {
        		if (res.code == 200) {
          			for (const item of res.data) {
            			this.options.faculty.push({
            				label: item.deptName,
            				value: item.deptCode
            			});
          		 	}
        		}
      		});
			this.getCategoryList();
		},
		onPageSizeChange(size) {
			this.model.pageSize_ = size;
			this.getEduProfessions();
		},
		onCurrentPageChange(currentPage) {
			this.model.pageNum_ = currentPage;
			this.getEduProfessions();
		},

		reset() {
			// console.log(this.model.grade);

			this.model.grade = "";
			this.model.faculty = "";
			this.model.category = "";
			this.model.bigCategory = "";
			this.model.categoryCode = "";
			this.model.professionClassCode = "";
			this.model.keyWord = "";
      this.model.isArts = null;
			this.getEduProfessions();
		},

		exportRel() {
			let postData = _.cloneDeep(this.model);
			postData.grade = Number(postData.grade);
			let data = Object.assign({}, postData);
			campusMinistryRelExport(data);
		},
		getFacultyStr(data) {
			let str = "";
			this.options.faculty.forEach(element => {
				if (element.value === data) {
					str = element.label;
				}
			});
			return str;
		},
		getCategoryStr(data) {
			let str = "";
			this.options.category.forEach(element => {
				if (element.value === data) {
					str = element.label;
				}
			});
			return str;
		}
	}
};
</script>

